<template>
  <div id="app" class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
    <header class="glass-effect border-b border-gray-200/50 sticky top-0 z-50">
      <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <!-- Logo -->
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 bg-gradient-to-r from-primary-600 to-purple-600 rounded-lg flex items-center justify-center">
              <Mic class="w-5 h-5 text-white" />
            </div>
            <h1 class="text-xl font-semibold text-gray-900">AI Meeting Minutes</h1>
          </div>

          <!-- Navigation -->
          <div class="hidden md:flex items-center space-x-8">
            <router-link
              to="/"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              :class="{ 'text-primary-600': $route.path === '/' }"
            >
              首页
            </router-link>
            <router-link
              to="/record"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              :class="{ 'text-primary-600': $route.path === '/record' }"
            >
              实时录音
            </router-link>
            <router-link
              to="/upload"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              :class="{ 'text-primary-600': $route.path === '/upload' }"
            >
              文件上传
            </router-link>
            <router-link
              to="/history"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              :class="{ 'text-primary-600': $route.path === '/history' }"
            >
              历史记录
            </router-link>
          </div>

          <!-- Mobile menu button -->
          <div class="md:hidden">
            <button
              @click="toggleMobileMenu"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200"
            >
              <Menu v-if="!mobileMenuOpen" class="w-6 h-6" />
              <X v-else class="w-6 h-6" />
            </button>
          </div>
        </div>

        <!-- Mobile navigation -->
        <div v-if="mobileMenuOpen" class="md:hidden py-4 border-t border-gray-200">
          <div class="flex flex-col space-y-4">
            <router-link
              to="/"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              @click="mobileMenuOpen = false"
            >
              首页
            </router-link>
            <router-link
              to="/record"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              @click="mobileMenuOpen = false"
            >
              实时录音
            </router-link>
            <router-link
              to="/upload"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              @click="mobileMenuOpen = false"
            >
              文件上传
            </router-link>
            <router-link
              to="/history"
              class="text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium"
              @click="mobileMenuOpen = false"
            >
              历史记录
            </router-link>
          </div>
        </div>
      </nav>
    </header>

    <!-- Main content -->
    <main>
      <router-view />
    </main>

    <!-- Footer -->
    <footer class="mt-auto border-t border-gray-200 bg-white/50 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center text-gray-600">
          <p>&copy; 2024 AI Meeting Minutes. AI会议纪要系统.</p>
        </div>
      </div>
    </footer>

    <!-- Toast Container -->
    <div class="fixed bottom-4 right-4 z-50 space-y-2">
      <Toast
        v-for="toast in toastStore.toasts"
        :key="toast.id"
        :type="toast.type"
        :title="toast.title"
        :message="toast.message"
        :duration="toast.duration"
        :show="toast.show"
        @close="toastStore.removeToast(toast.id)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Mic, Menu, X } from 'lucide-vue-next'
import { useToastStore } from '@/stores/toast'
import Toast from '@/components/ui/Toast.vue'

const mobileMenuOpen = ref(false)
const toastStore = useToastStore()

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}
</script>